<!-- 通用形配置 -->
<template>
  <div>
    <el-form-item label="装饰类型">
      <avue-select v-model="main.activeOption.is" :dic="decorationList" @change="changeType"></avue-select>
    </el-form-item>
    <!-- 颜色设置 -->
    <el-form-item label="装饰主颜色">
      <avue-input-color placeholder="请选择颜色" v-model="main.activeOption.color[0]">
      </avue-input-color>
    </el-form-item>
    <el-form-item label="装饰副颜色">
      <avue-input-color placeholder="请选择颜色" v-model="main.activeOption.color[1]"></avue-input-color>
    </el-form-item>
    <el-collapse>
    <el-collapse-item title="标题设置" v-if="hasTitle">
      <el-form-item label="标题" >
        <avue-input v-model="main.activeOption.text"></avue-input>
      </el-form-item>
      <el-form-item label="字体大小">
        <avue-input-number v-model="main.activeOption.fontSize"
                           :max="100"></avue-input-number>
      </el-form-item>
      <el-form-item label="字体颜色">
        <avue-input-color v-model="main.activeOption.titleColor"></avue-input-color>
      </el-form-item>
    </el-collapse-item>
    </el-collapse>

    <el-form-item label="翻转"  v-if="hasReverse">
      <avue-switch v-model="main.activeOption.reverse"></avue-switch>
    </el-form-item>
    <el-form-item label="动画时长(毫秒)" v-if="hasDur">
      <avue-input-number v-model="main.activeOption.dur"></avue-input-number>
    </el-form-item>
    <template v-if="main.activeOption.is === 'dv-decoration-12'">
      <el-form-item label="扫描动画时长(秒)">
        <avue-input-number v-model="main.activeOption.scanDur"></avue-input-number>
      </el-form-item>
      <el-form-item label="光晕动画时长(秒)">
        <avue-input-number v-model="main.activeOption.haloDur"></avue-input-number>
      </el-form-item>
    </template>
  </div>
</template>

<script>

export default {
  inject: ["main"],
  data() {
    return {
      decorationList: [
        {label: '装饰1', value: 'dv-decoration-1'},
        {label: '装饰2', value: 'dv-decoration-2'},
        {label: '装饰3', value: 'dv-decoration-3'},
        {label: '装饰4', value: 'dv-decoration-4'},
        {label: '装饰5', value: 'dv-decoration-5'},
        {label: '装饰6', value: 'dv-decoration-6'},
        {label: '装饰7', value: 'dv-decoration-7'},
        {label: '装饰8', value: 'dv-decoration-8'},
        {label: '装饰9', value: 'dv-decoration-9'},
        {label: '装饰10', value: 'dv-decoration-10'},
        {label: '装饰11', value: 'dv-decoration-11'},
        {label: '装饰12', value: 'dv-decoration-12'},
      ],
    }
  },
  components: {
  },
  methods: {
    changeType(type){
      this.main.activeObj.name = this.decorationMap[type]
    }
  },
  computed: {
    hasReverse(){
      return this.main.activeOption.is === "dv-decoration-2" ||
          this.main.activeOption.is === "dv-decoration-4" ||
          this.main.activeOption.is === "dv-decoration-5" ||
          this.main.activeOption.is === "dv-decoration-9"
    },
    hasDur(){
      return this.main.activeOption.is === "dv-decoration-2" ||
          this.main.activeOption.is === "dv-decoration-4" ||
          this.main.activeOption.is === "dv-decoration-8"
    },
    hasTitle(){
      return this.main.activeOption.is === "dv-decoration-7" ||
          this.main.activeOption.is === "dv-decoration-9" ||
          this.main.activeOption.is === "dv-decoration-11"
    },
    decorationMap(){
      let map ={}
      for( const decoration of this.decorationList){
        map[decoration.value] = decoration.label
      }
      return map
    }
  },
}
</script>

<style>
</style>